<template>
	<cl-drawer
		ref="drawer"
		:before-close="saveCondition"
		@close="closeDrawer"
		:props="{
			title: '条件设置',
			size: '600px',
			appendToBody: true,
			closeOnClickModal: false
		}"
		class="condition_copyer"
		show-confirm
		@confirm="saveCondition"
	>
		<div class="condition_content">
			<p class="tip">当审批单同时满足以下条件时进入此流程</p>
			<ul>
				<li
					v-for="(item, index) in conditionConfig.conditionList"
					:key="index"
					class="flex"
				>
					<template v-if="item.columnId == 2">
						<span class="ellipsis">品牌：</span>
						<cl-flex1>
							<cl-select
								v-model="item.zdy1"
								placeholder="请选择"
								filterable
								multiple
								collapse-tags
								style="width:100%;"
							>
								<el-option
									v-for="item in brandList"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-flex1>
					</template>
					<template v-else-if="item.columnId == 3">
						<span class="ellipsis">事业部：</span>
						<cl-flex1>
							<cl-select
								v-model="item.zdy1"
								placeholder="请选择"
								filterable
								multiple
								collapse-tags
								style="width:100%;"
							>
								<el-option
									v-for="item in bizAll"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-flex1>
					</template>
					<template v-else>
						<span class="ellipsis"
							>{{ item.type == 1 ? "发起人" : item.showName }}：</span
						>
						<div v-if="item.type == 1">
							<p
								:class="
									conditionConfig.nodeUserList.length > 0 ? 'selected_list' : ''
								"
								@click.self="addConditionRole"
								style="cursor:text"
							>
								<span
									v-for="(item1, index1) in conditionConfig.nodeUserList"
									:key="index1"
								>
									{{ item1.name }}
									<!-- <img
									src="@/assets/images/add-close1.png"
									@click="
										removeEle(conditionConfig.nodeUserList, item1, 'targetId')
									"
								/> -->
								</span>
								<input
									type="text"
									placeholder="请选择具体人员/角色/部门"
									v-if="conditionConfig.nodeUserList.length == 0"
									@click="addConditionRole"
								/>
							</p>
						</div>
						<div v-else-if="item.columnType == 'String' && item.showType == 3">
							<p class="check_box">
								<a
									:class="toggleStrClass(item, item1.key) && 'active'"
									@click="toStrChecked(item, item1.key)"
									v-for="(item1, index1) in JSON.parse(item.fixedDownBoxValue)"
									:key="index1"
									>{{ item1.value }}</a
								>
							</p>
						</div>
						<!-- 暂时只需要看这种方式 -->
						<div v-else class="cl-flex1">
							<p class="flex">
								<cl-select
									v-model="item.optType"
									:style="'width:' + (item.optType == 6 ? '100%' : '150px')"
									@change="changeOptType(item)"
								>
									<el-option
										v-for="v in optTypeList"
										:key="v.value"
										:value="v.value"
										:label="v.label"
									/>
								</cl-select>
								<el-input
									class="ml-1"
									v-if="item.optType != 6"
									:placeholder="'请输入' + item.showName"
									v-enter-number="2"
									v-model="item.zdy1"
								/>
							</p>
							<p v-if="item.optType == 6">
								<el-input
									style="width:75px;"
									class="mr-1"
									v-enter-number="2"
									v-model="item.zdy1"
								/>
								<cl-select style="width:60px;" v-model="item.opt1">
									<el-option :value="1" label="<" />
									<el-option :value="3" label="≤" />
								</cl-select>
								<span
									class="ellipsis mlr-1"
									style="display:inline-block;vertical-align: text-bottom;"
								>
									{{ item.showName }}
								</span>
								<cl-select style="width:60px;" class="mr-1" v-model="item.opt2">
									<el-option :value="1" label="<" />
									<el-option :value="3" label="≤" />
								</cl-select>
								<el-input
									style="width:75px;"
									v-enter-number="2"
									v-model="item.zdy2"
								/>
							</p>
						</div>
					</template>

					<div class="ml-1">
						<el-button
							v-if="item.type == 1"
							type="text"
							@click="
								conditionConfig.nodeUserList = [];
								removeEle(conditionConfig.conditionList, item, 'columnId');
							"
						>
							删除
						</el-button>
						<el-button
							v-if="item.type == 2"
							type="text"
							@click="removeEle(conditionConfig.conditionList, item, 'columnId')"
						>
							删除
						</el-button>
					</div>
				</li>
			</ul>
			<el-button type="primary" @click="addCondition">添加条件</el-button>
		</div>
		<el-dialog
			title="选择条件"
			:visible.sync="conditionVisible"
			width="480px"
			append-to-body
			class="condition_list"
		>
			<p>请选择用来区分审批流程的条件字段</p>
			<p class="check_box">
				<!-- <a
					:class="toggleClass(conditionList, { columnId: 0 }, 'columnId') && 'active'"
					@click="toChecked(conditionList, { columnId: 0 }, 'columnId')"
					>发起人</a
				> -->
				<el-checkbox-group v-model="checkedList">
					<el-row :gutter="20">
						<el-col :span="6" v-for="item in conditions" :key="item.columnId">
							<el-checkbox :label="item.columnId">
								{{ item.showName }}
							</el-checkbox>
						</el-col>
					</el-row>
				</el-checkbox-group>
			</p>
			<span slot="footer" class="dialog-footer">
				<el-button @click="conditionVisible = false">取 消</el-button>
				<el-button type="primary" @click="sureCondition">确 定</el-button>
			</span>
		</el-dialog>
	</cl-drawer>
</template>
<script>
import funcMixin from "./func.js";
import { mapGetters } from "vuex";
export default {
	mixins: [funcMixin],
	props: ["directorMaxLevel"],
	data() {
		return {
			conditionVisible: false,
			conditionsConfig: {
				conditionNodes: []
			},
			conditionConfig: {},
			PriorityLevel: "",
			conditions: [
				{
					columnId: 1,
					showType: 1,
					showName: "退款金额",
					columnType: "Double",
					fixedDownBoxValue: ""
				},
				{
					columnId: 2,
					showType: 3,
					showName: "品牌",
					columnType: "BizRef",
					fixedDownBoxValue: ""
				},
				{
					columnId: 3,
					showType: 3,
					showName: "事业部",
					columnType: "BizRef",
					fixedDownBoxValue: ""
				}
			],
			checkedList: [],
			optTypeList: [
				{ value: 1, label: "小于" },
				{ value: 2, label: "大于" },
				{ value: 3, label: "小于等于" },
				{ value: 4, label: "等于" },
				{ value: 5, label: "大于等于" },
				{ value: 6, label: "介于两个数之间" }
			]
		};
	},
	computed: {
		...mapGetters({
			conditionsConfig1: "flowDesignConditionsConfig",
			conditionDrawer: "flowDesignConditionDrawer"
		})
	},
	watch: {
		conditionsConfig1: {
			deep: true,
			handler(v) {
				this.conditionsConfig = v.value;
				this.PriorityLevel = v.priorityLevel;
				this.conditionConfig = v.priorityLevel
					? this.conditionsConfig.conditionNodes[v.priorityLevel - 1]
					: { nodeUserList: [], conditionList: [] };
			}
		},
		conditionDrawer(v) {
			this.toggle(v);
		}
	},
	created() {
		this.$store.dispatch("common/getBrands");
		this.$store.dispatch("biz/getBusinessAll");
	},
	methods: {
		toggle(v) {
			this[v ? "open" : "close"]();
		},
		open() {
			this.$refs.drawer.create(() => {
				this.conditionConfig.conditionList.forEach(async item => {
					if (item.columnType == "BizRef" && item.zdy1) {
						if (item.columnId == 2) {
							if (!item.zdy1) {
								this.$set(item, "zdy1", []);
							} else {
								this.$set(item, "zdy1", item.zdy1.map(Number));
							}
						}
						if (item.columnId == 3) {
							if (!item.zdy1) {
								this.$set(item, "zdy1", []);
							} else {
								this.$set(item, "zdy1", item.zdy1.map(Number));
							}
						}
					}
				});
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		changeOptType(item) {
			if (item.optType == 1) {
				item.zdy1 = 2;
			} else {
				item.zdy1 = 1;
				item.zdy2 = 2;
			}
		},
		toStrChecked(item, key) {
			let a = item.zdy1 ? item.zdy1.split(",") : [];
			let isIncludes = this.toggleStrClass(item, key);
			if (!isIncludes) {
				a.push(key);
				item.zdy1 = a.toString();
			} else {
				this.removeStrEle(item, key);
			}
		},
		removeStrEle(item, key) {
			let a = item.zdy1 ? item.zdy1.split(",") : [];
			let includesIndex;
			a.map((item, index) => {
				if (item == key) {
					includesIndex = index;
				}
			});
			a.splice(includesIndex, 1);
			item.zdy1 = a.toString();
		},
		addCondition() {
			// this.conditionList = [];
			// this.conditionVisible = true;
			// this.$axios
			// 	.get(`${process.env.BASE_URL}conditions.json?tableId=${this.tableId}`)
			// 	.then(res => {
			// 		this.conditions = res.data;
			// 		if (this.conditionConfig.conditionList) {
			// 			for (let i = 0; i < this.conditionConfig.conditionList.length; i++) {
			// 				let { columnId } = this.conditionConfig.conditionList[i];
			// 				if (columnId == 0) {
			// 					this.conditionList.push({ columnId: 0 });
			// 				} else {
			// 					this.conditionList.push(
			// 						this.conditions.filter(item => {
			// 							return item.columnId == columnId;
			// 						})[0]
			// 					);
			// 				}
			// 			}
			// 		}
			// 	});
			const { conditionList } = this.conditionConfig;
			let checkedList = this.conditions
				.filter(v => {
					return (
						this.toggleClass(conditionList, v, "columnId") ||
						this.toggleClass(conditionList, v, "showName")
					);
				})
				.map(v => v.columnId);
			this.checkedList = checkedList;
			this.conditionVisible = true;
			// this.sureCondition();
		},
		async sureCondition() {
			//1.弹窗有，外面无+
			//2.弹窗有，外面有不变
			let conditionList = this.conditions.filter(v => this.checkedList.includes(v.columnId));

			for (let i = 0; i < conditionList.length; i++) {
				let {
					columnId,
					showName,
					columnName,
					showType,
					columnType,
					fixedDownBoxValue
				} = conditionList[i];
				if (
					this.toggleClass(
						this.conditionConfig.conditionList,
						conditionList[i],
						"columnId"
					)
				) {
					continue;
				}
				if (columnId == 0) {
					this.conditionConfig.nodeUserList == [];
					this.conditionConfig.conditionList.push({
						type: 1,
						columnId,
						showName: "发起人"
					});
				} else if (columnId == 2) {
					let data = {
						showType,
						columnId,
						type: 2,
						showName,
						optType: 7,
						zdy1: [], // 品牌
						zdy2: "",
						opt1: "",
						opt2: 1,
						columnDbname: columnName,
						columnType
					};
					this.conditionConfig.conditionList.push(data);
					// this.$nextTick(() => {
					// 	this.changeBiz(this.conditionConfig.conditionList[i]);
					// });
				} else if (columnId == 3) {
					let data = {
						showType,
						columnId,
						type: 2,
						showName,
						optType: 7,
						zdy1: [], // 事业部
						zdy2: "",
						opt1: "",
						opt2: 1,
						columnDbname: columnName,
						columnType
					};
					this.conditionConfig.conditionList.push(data);
					// this.$nextTick(() => {
					// 	this.changeBiz(this.conditionConfig.conditionList[i]);
					// });
				} else {
					if (columnType == "Double") {
						this.conditionConfig.conditionList.push({
							showType,
							columnId,
							type: 2,
							showName,
							optType: 1,
							zdy1: 2,
							opt1: 1,
							zdy2: "",
							opt2: 1,
							columnDbname: columnName,
							columnType
						});
					} else if (columnType == "String" && showType == 3) {
						this.conditionConfig.conditionList.push({
							showType,
							columnId,
							type: 2,
							showName,
							zdy1: "",
							columnDbname: columnName,
							columnType,
							fixedDownBoxValue
						});
					}
				}
			}
			////3.弹窗无，外面有-
			for (let i = this.conditionConfig.conditionList.length - 1; i >= 0; i--) {
				if (
					!this.toggleClass(
						conditionList,
						this.conditionConfig.conditionList[i],
						"columnId"
					)
				) {
					this.conditionConfig.conditionList.splice(i, 1);
				}
			}
			this.conditionConfig.conditionList.sort(function(a, b) {
				return a.columnId - b.columnId;
			});
			this.conditionVisible = false;
		},
		saveCondition() {
			let a = this.conditionsConfig.conditionNodes.splice(this.PriorityLevel - 1, 1); //截取旧下标
			this.conditionsConfig.conditionNodes.splice(
				this.conditionConfig.priorityLevel - 1,
				0,
				a[0]
			); //填充新下标
			this.conditionsConfig.conditionNodes.map((item, index) => {
				item.priorityLevel = index + 1;
			});
			for (let i = 0; i < this.conditionsConfig.conditionNodes.length; i++) {
				this.conditionsConfig.conditionNodes[i].error = this.conditionHasErr(
					this.conditionsConfig,
					i
				);
				// this.conditionStr(this.conditionsConfig, i) == "请设置条件" &&
				// i != this.conditionsConfig.conditionNodes.length - 1;
			}
			this.$store.commit("updateConditionsConfig", {
				value: this.conditionsConfig,
				flag: true,
				id: this.conditionsConfig1.id
			});
			this.closeDrawer();
		},
		closeDrawer() {
			this.$store.commit("updateCondition", false);
		}
	}
};
</script>

<style lang="scss">
.condition_copyer {
	.condition_content {
		p.tip {
			margin: 20px 0;
			text-indent: 17px;
			line-height: 45px;
			background: #fdf6ec;
			border: 1px solid $color-warning;
			color: $color-warning;
			font-size: 14px;
			border-radius: 4px;
		}
		ul {
			margin-bottom: 20px;
			font-size: 12px;
			li {
				&:not(:last-child) {
					margin-bottom: 10px;
				}
				& > span {
					float: left;
					margin-right: 5px;
					width: 70px;
					line-height: 32px;
					text-align: right;
				}
				& > div {
					display: inline-block;
					& > p:not(:last-child) {
						margin-bottom: 10px;
					}
				}
				& > a {
					float: right;
					margin-right: 10px;
					margin-top: 7px;
				}
				p.selected_list {
					padding-left: 10px;
					border-radius: 4px;
					min-height: 32px;
					border: 1px solid rgba(217, 217, 217, 1);
					word-break: break-word;
				}
				p.check_box {
					line-height: 32px;
				}
			}
		}
	}
}
.condition_list {
	.el-dialog__body {
		padding: 16px 26px;
	}
	p {
		color: #666666;
		margin-bottom: 10px;
		& > .check_box {
			margin-bottom: 0;
			line-height: 36px;
		}
	}
}
</style>
